Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Sebelum menggunakan Bootstrap dalam pengembangan website, developer perlu melakukan proses instalasi atau menghubungkan file Bootstrap ke dalam project HTML. Bootstrap dapat digunakan dengan beberapa cara, seperti menggunakan CDN (Content Delivery Network) atau dengan mengunduh file Bootstrap secara langsung dan menyimpannya di dalam project.
Dengan melakukan instalasi yang benar, developer dapat menggunakan berbagai fitur Bootstrap seperti grid system, komponen UI, dan utilities CSS untuk membangun tampilan website dengan lebih cepat.
CDN (Content Delivery Network) adalah cara paling mudah dan cepat untuk menggunakan Bootstrap tanpa perlu mengunduh file framework secara manual.
Pada metode ini, file Bootstrap akan diambil langsung dari server internet sehingga developer hanya perlu menambahkan link CDN ke dalam file HTML.
Buka file HTML yang akan digunakan.
Tambahkan link CSS Bootstrap pada bagian <head>.
Tambahkan file JavaScript Bootstrap sebelum tag </body>.
<!DOCTYPE html><html><head><title>Belajar Bootstrap</title><!-- Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"></head><body><h1 class="text-primary">Hello Bootstrap</h1><!-- Bootstrap JS --><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></body></html>
Tidak perlu mengunduh file Bootstrap
Instalasi sangat cepat
Mudah digunakan untuk belajar dan prototyping
Membutuhkan koneksi internet
Tidak cocok untuk pengembangan offline
Selain menggunakan CDN, Bootstrap juga dapat digunakan dengan cara mengunduh file Bootstrap dan menyimpannya ke dalam project website.
Cara ini biasanya digunakan jika developer ingin:
Mengembangkan website secara offline
Mengatur file project secara lokal
Mengoptimasi penggunaan file CSS dan JavaScript
Kunjungi website resmi Bootstrap
https://getbootstrap.com
Download file Bootstrap
Ekstrak file Bootstrap
Simpan file Bootstrap ke dalam folder project
Contoh struktur folder project:
project-website│├── css│ └── bootstrap.min.css│├── js│ └── bootstrap.bundle.min.js│└── index.html
Bootstrap terdiri dari beberapa file utama yang digunakan untuk mengatur tampilan dan interaksi website.
File CSS digunakan untuk mengatur tampilan desain seperti:
layout
typography
warna
button
form
grid system
Contoh file CSS Bootstrap:
bootstrap.cssbootstrap.min.css
Penjelasan:
bootstrap.css → file asli yang mudah dibaca
bootstrap.min.css → file yang sudah dikompres untuk performa lebih cepat
Bootstrap juga menyediakan file JavaScript yang digunakan untuk membuat komponen interaktif.
Contoh file JavaScript:
bootstrap.jsbootstrap.bundle.jsbootstrap.min.jsbootstrap.bundle.min.js
Beberapa komponen Bootstrap yang membutuhkan JavaScript:
Modal
Dropdown
Collapse
Carousel
Tooltip
Biasanya developer menggunakan file berikut:
bootstrap.bundle.min.js
Karena file ini sudah termasuk Popper.js yang dibutuhkan oleh beberapa komponen Bootstrap.
Setelah file Bootstrap tersedia, langkah berikutnya adalah menghubungkannya ke dalam file HTML.
File CSS harus dimasukkan pada bagian <head>.
Contoh:
<head><link rel="stylesheet" href="css/bootstrap.min.css"></head>
File JavaScript biasanya diletakkan sebelum penutup tag </body>.
Contoh:
<script src="js/bootstrap.bundle.min.js"></script>
Tujuan meletakkan JavaScript di bagian bawah adalah agar halaman HTML dapat dimuat terlebih dahulu sebelum JavaScript dijalankan, sehingga website lebih cepat diakses.
Setelah Bootstrap berhasil dihubungkan ke dalam project, langkah selanjutnya adalah mencoba membuat halaman HTML sederhana menggunakan Bootstrap.
Contoh halaman HTML pertama menggunakan Bootstrap:
<!DOCTYPE html><html><head><title>Website Bootstrap Pertama</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head><body>
<div class="container mt-5">
<h1 class="text-center text-primary">Belajar Bootstrap</h1>
<p class="text-center">Ini adalah halaman pertama menggunakan Bootstrap.</p>
<button class="btn btn-success">Klik Saya</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body></html>
container → membuat layout lebih rapi
mt-5 → margin top
text-center → teks rata tengah
text-primary → warna teks biru
btn btn-success → tombol dengan style Bootstrap
Dengan hanya menggunakan beberapa class Bootstrap, tampilan website sudah terlihat lebih rapi dan modern.
Bootstrap dapat digunakan dengan dua cara utama yaitu melalui CDN atau dengan mengunduh file Bootstrap secara langsung. Setelah Bootstrap dihubungkan ke dalam project HTML, developer dapat menggunakan berbagai class dan komponen Bootstrap untuk membuat tampilan website dengan lebih cepat dan efisien. Instalasi dan setup Bootstrap merupakan langkah awal yang penting sebelum mempelajari grid system, komponen UI, dan responsive design pada Bootstrap.